<template>
	<div :class="props.row === 5 ? 'product-contianer-5' : 'product-contianer'">
		<el-card v-for="item in props.list" :key="item.cover" class="box-card" @click="toDetails(item.id)">
			<img :src="item.cover" alt="">
			<div>
				<div class="number">
					<span class="price">￥{{ item.price }}</span>
					<span class="inventory">{{ item.inventory }}</span>
				</div>
				<div class="name">{{ item.name }}</div>
			</div>
		</el-card>
	</div>
</template>
<script setup>
import { defineProps } from 'vue';
import { useRouter } from 'vue-router';
const props = defineProps(['list', 'row']);

const router = useRouter()
const toDetails = (id) => {
	router.push('/details/' + id)
}

</script>
<style scoped lang="less">
.product-contianer {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr;
}

.product-contianer-5 {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
}
.box-card {
	margin-top: 1.2rem;
	max-width: 240px;
	img {
		width: 100%;
	}
.number {
	padding-top: 0.3rem;
	display: flex;
	justify-content: space-between;
.price {
	color: #f40;
	font-size: 1.1rem;
	font-weight: bold;
	}

.inventory {
	font-size: 1rem;
	color: #ccc;
	}
	}
.name {
	color: #333;
	line-height: 1rem;
	font-size: 0.92rem;
	padding-top: 0.2rem;
	}

&:hover {
cursor: pointer;
	}
}
</style>
